import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// const path = require('path'); 改为
import { resolve } from "path";
// element 的按需自动导入配置
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
// css 自动添加前缀
import autoprefixer from "autoprefixer";
// 引入viteMockServe
import { viteMockServe } from "vite-plugin-mock";
// 引入svg插件
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";

// 返回相对于当前的工作目录
function pathResolve(dir: string) {
  return resolve(process.cwd(), ".", dir);
}

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    // 显示ipv4地址 监听所有地址，包括局域网和公网地址。
    host: true,
    // 端口号 8080
    port: 5173,
    // 在开发服务器启动时自动在浏览器中打开应用程序
    open: true,
    // 设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口。
    strictPort: true,
  },
  // 构建配置
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          // 将pinia的全局实例打包进vendor,避免和页面一起打包造成资源重复引入
          if (id.includes(resolve(__dirname, "/src/store/index.ts"))) {
            return "vendor";
          }
        },
      },
    },
  },
  plugins: [
    AutoImport({
      // 自动引入 vue 的api
      // imports:["vue"],
      resolvers: [ElementPlusResolver()],
      // 生成位置
      dts: "types/auto-import.d.ts",
    }),
    Components({
      resolvers: [ElementPlusResolver()],
      // 借用插件可使组件自动注册
      dirs: ["src/components"],
      extensions: ["vue", "tsx"],
      dts: "types/components.d.ts",
    }),
    vue(),
    viteMockServe({
      /**
       * supportTs?: boolean; --是否读取ts文件模块，设置为true时不能读取js文件
       * logger?:boolean; --是否在控制台显示请求日志
       * mockPath?: string;  --设置模拟数据的存储文件夹，如果不是index.js需要写明完整路径
       * ignore?: RegExp | ((fileName: string) => boolean);--读取文件时忽略指定格式的文件
       * watchFiles?: boolean;--是否监视mockPath文件夹内文件的修改
       * localEnabled?: boolean;--设置是否启用本地 xxx.ts 文件，不要在生产环境中打开它.设置为 false 将禁用 mock 功能
       * ignoreFiles?: string[]; --读取文件时忽略的文件
       * configPath?: string;--设置模拟读取的数据条目。 当文件存在并且位于项目根目录中时，将首先读取并使用该文件。 配置文件返回一个数组
       * prodEnabled?: boolean;--设置打包是否启用 mock 功能
       * injectFile?: string;--如果生产环境开启了 mock 功能,即prodEnabled=true.则该代码会被注入到injectFile对应的文件的底部。默认为main.{ts,js}。这样做的好处是,可以动态控制生产环境是否开启 mock 且在没有开启的时候 mock.js 不会被打包。如果代码直接写在main.ts内，则不管有没有开启,最终的打包都会包含mock.js
       * injectCode?: string;--injectCode代码注入的文件,默认为项目根目录下src/main.{ts,js}
       */
      supportTs: true,
      logger: false,
      mockPath: "./mock/",
    }),
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [resolve(process.cwd(), "src/icons")],
      // 指定symbolId格式
      symbolId: "icon-[dir]-[name]",
    }),
  ],
  resolve: {
    // 以下文件在import时可以不写后缀
    extensions: [".js", ".ts", ".vue"],
    // 配置路径别名
    // alias: {
    //   "@": resolve(__dirname, "src"),
    // },
    alias: [
      // @/xxxx => src/xxxx
      {
        find: /@\//,
        replacement: pathResolve("src") + "/",
      },
    ],
  },
  css: {
    preprocessorOptions: {
      scss: {
        // 两种方式都可以 引入全局scss变量
        // additionalData: `@use "@/styles/variables.scss" as *;`,
        additionalData: `@use "@/styles/index.scss" as *;`,
        // additionalData: `@import "@/styles/variables.module.scss";`,
      },
    },
    // vite 中已集成postcss
    postcss: {
      plugins: [
        autoprefixer({
          overrideBrowserslist: [
            // "Android 4.1",
            // "iOS 7.1",
            "Chrome > 31",
            "ff > 31",
            // vue3 已放弃ie
            // "ie >= 8",
            "> 1%",
          ],
          grid: true,
        }),
        {
          // 去除警告: [WARNING] "@charset" must be the first rule in the file
          postcssPlugin: "internal:charset-removal",
          AtRule: {
            charset: (atRule) => {
              if (atRule.name === "charset") {
                atRule.remove();
              }
            },
          },
        },
      ],
    },
  },
});
